<template>
  <div id="app">
    <!-- 该页面作为所有页面的父页面存在-->

    <h1>这是终极父页面，所有页面的爸爸</h1>
    <!-- 使用router-link制作导航

      to="页面的路径（路由中配置的该页面的路径）"
    -->
    <router-link to="/">首页</router-link>
    <!--<router-link to="/product">商品页面</router-link>-->


    <!--&lt;!&ndash;父子页面跳转&ndash;&gt;-->
    <!--<router-link to="/product/apple">商品苹果页面</router-link>-->
    <!--<router-link to="/product/alies">商品外星人页面</router-link>-->

    <router-link to="/hi">Hi页面</router-link>
    <!--<router-link to="/hi1">Hi1页面</router-link>-->
    <!--<router-link to="/hi2">Hi2页面</router-link>-->
    <!-- 这时父子路由-->
    <router-link to="/hi/hi1">父子路由HI1</router-link>
    <router-link to="/hi/hi2">父子路由HI2</router-link>

    <!-- 加载子页面-->

    <router-link to="/loadPage">去往主页面</router-link>

    <!-- 跳往参数页面-->
    <!--
    通过路由传参一共有4中方式：
    1.通过路由中的name只来进行传参，使用较少，没有实际应用的方便
    2.通过 to标签来进行传参
    3.通过url路径进行传参
      3.1 配置index.js 在path路径后跟上:key值,可以一次性传递多个参数  例如：/parmurl/:id/:name/:title/:suiyi ....
      3.2 通过url传递参数时，必须路径上有该参数，如果没有，则无法访问到对应的页面
      3.3 在对应页面中通过{{$route.parmas.key}}
    4.编程式导航 ：通过点击触发方法，在方法中进行参数的传递
      4.1 通过触发方法，进行参数的传递。
      4.2 this.$router.push({name:'跳转页面的name',params:{key:value}})
      4.3 在对应页面通过{{$route.params.key}}获取参数

    -->
    <router-link to="/parm1">参数页面</router-link>
    <!--
    : 是v-bind的缩写
    :to="{name:'路由中的name值',params:{key:value}}"
    -->
    <router-link :to="{name:'parm1',params:{id:'1'}}">to标签传参</router-link>
    <router-link  to="/parmurl/1/张三">url传递参数</router-link>

    <router-view/>

    <!-- 单页面多路由的操作-->
    <router-view name="left1" style="float: left;width: 50%;background-color: #42b983"></router-view>
    <router-view name="right1" style="float: left;width: 50%;background-color:lavender;"></router-view>

  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
